<template>
  <div>
    <el-card class="cursor-pointer">
      <el-form v-model="queryParams" class="flex flex-row items-center py-5 px-6 flex-wrap" ref="queryForm" size="small"
        :inline="true" label-width="78px">
        <el-form-item label="" prop="status">
          <el-select v-model="queryParams.type" @change="statusChange" multiple collapse-tags-tooltip
            style="width: 220px" placeholder="请选择项目类型" size="default">
            <el-option v-for="(dict, index) in [{ label: '全部', value: 'all' }]" :label="dict.label" :value="dict.value"
              :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="status">
          <el-select v-model="queryParams.trainingStatus" @change="statusChange" multiple collapse-tags-tooltip
            style="width: 220px" placeholder="请选择训练状态" size="default">
            <el-option v-for="(dict, index) in [{ label: '训练1', value: 't1' }]" :label="dict.label" :value="dict.value"
              :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="status">
          <el-select v-model="queryParams.evaluateStatus" @change="statusChange" multiple collapse-tags-tooltip
            style="width: 220px" placeholder="请选择评估状态" size="default">
            <el-option v-for="(dict, index) in [{ label: '成功', value: 'success' }]" :label="dict.label"
              :value="dict.value" :key="index" />
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="date">
          <el-date-picker size="default" v-model="queryParams.orderDate" value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]" class="!w-220px" />
        </el-form-item>

        <el-form-item label="" prop="search">
          <el-input v-model="queryParams.search" size="default" style="width: 274px" placeholder="请输入项目ID/名称/描述"
            clearable @keyup.enter="() => handleQuery()" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="() => handleQuery()" size="default">
            <Icon icon="ep:search" class="mr-5px" /> 查询
          </el-button>
          <el-button size="default" @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px" /> 重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="mt-8">
      <template #header>
        <div class="wrap flex items-center">
          <section class="left flex items-center gap-1">
            <img src="/public/Menu.svg" class="!w-[18px]" />
            <span class="leading-21 fontStyle0">项目列表</span>
          </section>
          <section class="rightBtn ml-auto mr-21 flex items-center">
            <el-button type="primary" @click="toCreate">新 建</el-button>
          </section>
        </div>
      </template>
      <template #default>
        <section class="itemTable w-full overflow-hidden">
          <el-table class="overflow-hidden"
            :header-cell-style="{ backgroundColor: '#f2f2f2', fontWeight: 700, color: '#909399' }" :data="listData"
            :stripe="true" :show-overflow-tooltip="true">
            <el-table-column align="left" label="项目ID" width="120" prop="id" />

            <el-table-column align="left" width="120" label="图库ID" prop="galleryId" />
            <el-table-column align="left" width="120" label="名称" prop="name">
              <template #default="scope">
                <el-button class="!border-b-indigo" link type="primary" size="default"
                  @click="openProjectDetail(scope.row)">
                  <span class="font-600 c-indigo underline-blue border-b-indigo"> {{
                    scope.row.name
                    }}</span>
                </el-button>
              </template>
            </el-table-column>
            <el-table-column align="left" width="120" label="类型" prop="type" :formatter="typeFormatter" />
            <el-table-column align="left" width="120" label="权限" prop="isPrivate" :formatter="typeAuth" />
            <el-table-column align="left" label="描述" width="165" prop="description" />
            <el-table-column align="left" width="120" label="已标注/图片数" prop="" :formatter="formatterCount" />
            <el-table-column align="left" width="120" label="训练状态" prop="apply" />
            <el-table-column align="left" width="120" label="评估状态" prop="apply" />
            <el-table-column align="left" width="120" label="创建人" prop="creator" />
            <el-table-column align="left" label="创建时间" width="165" prop="createTime"
              :formatter="(row) => formatDate(row.createTime)" />
            <el-table-column align="left" width="220" label="操作" fixed="right" prop="action">
              <template #default="scope">
                <el-button link type="primary" :test="scope" @click="editForm(scope.row)"> 编辑 </el-button>
                <el-button link type="primary" @click="deleteProject(scope.row.id)"> 删除 </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <pagination class="myPagination" layout=" total, prev, pager, next, jumper," v-show="queryParams.total > 0"
            :total="queryParams.total" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo"
            @pagination="getList" />
        </section>
      </template>
    </el-card>
    <editFormCom ref="editFormRef" @success="getList" width="60%" />
  </div>
</template>

<script lang="ts" setup>
import router from '@/router'
import editFormCom from './editForm.vue'
import { getProjectList, deleteProjectById } from '@/api/a-project/index'
import { DICT_TYPE, getDictOptions } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'

const message = useMessage()
const editFormRef = ref()
const queryParams = reactive({
  type: '',
  trainingStatus: '',
  evaluateStatus: '',
  orderDate: '',
  status: null,
  search: '',
  pageSize: 10,
  pageNo: 1,
  total: 0
})
const listData = ref([])
const exportLoading = ref(false)
let algorithmType = []

const editForm = (row) => {
  editFormRef.value.open(row)
}

const deleteProject = async (id) => {
  try {
    const res = await message.confirm('确定要删除该项目吗？')
    if (res) {
      const delRes = await deleteProjectById(id)
      if (delRes) {
        message.success('删除成功')
        getList()
      } else {
        message.error('删除失败')
      }
    }
  } catch (error) {
    message.error('网络错误，请检查！')
    console.log(error)
  }

}

const formatterCount = (row, column, cellValue, index) => {
  // console.log(row)
  const gallertId = row.galleryId
  if (gallertId === null) { // 说明没有图库绑定到该项目
    return '0/0'
  } else {
    return `${row.markNum}/${row.imageCount}`
  }

}
const typeFormatter = (row) => {
  const find = algorithmType.find((item) => item.value == row.type)
  return find ? find.label : ''
}
const typeAuth = (row) => {
  return row.isPrivate == 1 ? '私有' : '公开'
}
// 打开图库创建，绑定到项目
const openProjectDetail = (row) => {
  router.push({ name: 'projectDetail', query: { row: JSON.stringify(row) } })
}

const toCreate = () => {
  router.push({ name: 'projectCreate' })
}
const getList = async () => {
  const res = await getProjectList(queryParams)
  if (res) {
    listData.value = res.list
    queryParams.total = res.total
  }
}
const handleQuery = () => { }
const resetQuery = () => {
  queryParams.orderDate = ''
  queryParams.status = null
  queryParams.search = ''
  getList()
}
const statusChange = (value) => { }

const handleExport = () => {
  exportLoading.value = true
  setTimeout(() => {
    exportLoading.value = false
  }, 2000)
}
// 获得动态添加的字典
const getDict = async () => {
  const dicts = await getDictOptions(DICT_TYPE.Algorithm_CATEGORY)
  if (algorithmType) {
    algorithmType = dicts
  }
}

onMounted(() => {
  getList()
  getDict()
})
</script>

<style></style>
